<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/date-fr-BE.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.4.4.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.8.5.custom.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/json.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/common.css" />
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/invoice.css" />
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/ui-lightness/jquery-ui-1.8.5.custom.css"/>

        <script type="text/javascript">
            $(function () {
                var issueDate = new Date();
                $("#date").html("<p>" + issueDate.toString("dd / MM / yyyy") + "</p>");

                $("#background").ajaxError(function() {
                    alert("An error occured");
                });

                $("#submit").click(function() {
                    $.postJSON("new", serializeData(), function(data) {
                        document.location.href = "../invoice/view-invoice.html?number=" + data.invoice_number;
                    }, "json");

                });

                $("#client-name").change(function() {
                   $("#contract-ref").val("");
                });

                $("#contract-ref").change(function() {
                   $("#client-name").val("");
                });

                $("#client-name").autocomplete({
                    source: "../client/autocomplete.html",
                    minLength: 1,
                    focus: function(event, ui) {
                        $("#client-name").val(ui.item.name);
                        return false;
                    },
                    select: function(event, ui) {
                        $("#contract .client-data p.name").html("&nbsp;");
                        $("#contract .client-data p.street").html("&nbsp;");
                        $("#contract .client-data p.zipcity").html("&nbsp;");
                        $("#contract .client-data p.country").html("&nbsp;");
                        $("#contract .client-data p.vat").html("&nbsp;");
                        $("#contract_client_id").html("&nbsp;");

                        $("#client .client-data p.name").html(ui.item.name);
                        $("#client .client-data p.street").html(ui.item.street);
                        $("#client .client-data p.zipcity").html("<span class=\"zip\">" + ui.item.zip + "</span>&nbsp;<span class=\"city\">" + ui.item.city + "</span>");
                        $("#client .client-data p.country").html(ui.item.country);
                        $("#client .client-data p.vat").html(ui.item.vat);
                        $("#client_id").html(ui.item.id);
                        return false;
                    }
                })
                .data( "autocomplete" )._renderItem = function( ul, item ) {
                    $("#client .client-data p.name").html("&nbsp;");
                    $("#client .client-data p.street").html("&nbsp;");
                    $("#client .client-data p.zipcity").html("&nbsp;");
                    $("#client .client-data p.country").html("&nbsp;");
                    $("#client .client-data p.vat").html("&nbsp;");
                    $("#client_id").html("&nbsp;");
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.name + "<br>" + item.zip + "&nbsp;&nbsp;" + item.city + "</a>" )
                        .appendTo( ul );
                };

                $("#contract-ref").autocomplete({
                    source: "../contract/autocomplete.html",
                    minLength: 1,
                    focus: function(event, ui) {
                        $("#contract-ref").val(ui.item.reference);
                        return false;
                    },
                    select: function(event, ui) {
                        $("#client .client-data p.name").html("&nbsp;");
                        $("#client .client-data p.street").html("&nbsp;");
                        $("#client .client-data p.zipcity").html("&nbsp;");
                        $("#client .client-data p.country").html("&nbsp;");
                        $("#client .client-data p.vat").html("&nbsp;");
                        $("#client_id").html("&nbsp;");

                        $("#contract .client-data p.name").html(ui.item.client.name);
                        $("#contract .client-data p.street").html(ui.item.client.street);
                        $("#contract .client-data p.zipcity").html("<span class=\"zip\">" + ui.item.client.zip + "</span>&nbsp;<span class=\"city\">" + ui.item.client.city + "</span>");
                        $("#contract .client-data p.country").html(ui.item.client.country);
                        $("#contract .client-data p.vat").html(ui.item.client.vat);
                        $("#contract_client_id").html(ui.item.client.id);
                        return false;
                    }
                })
                .data( "autocomplete" )._renderItem = function( ul, item ) {
                    $("#contract_client_id").html("&nbsp;");
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.reference + "<br>" + item.client.name + "</a>" )
                        .appendTo( ul );
                };

                $("#newclient").dialog({
                    autoOpen: false,
                    height: 310,
                    width: 360,
                    modal: true,
                    buttons: {
                        "Add": function() {
                            var client = new Object();
                            client.name = $("#newclient input[name=name]").val();
                            client.street = $("#newclient input[name=street]").val();
                            client.zip = $("#newclient input[name=zip]").val();
                            client.city = $("#newclient input[name=city]").val();
                            client.country = $("#newclient input[name=country]").val();
                            client.vat = $("#newclient input[name=vat]").val();

                            $.postJSON("../client/new", client, function(data) {
                                $("#client-name").val(client.name);
                                $("#client div.data p.street").html(client.street);
                                $("#client div.data p.zipcity").html("<span class=\"zip\">" + client.zip + "</span>&nbsp;<span class=\"city\">" + client.city + "</span>");
                                $("#client div.data p.country").html(client.country);
                                $("#client div.data p.vat").html(client.vat);
                                $("#client_id").html(data.id);
                            }, "json")
                            $( this ).dialog( "close" );
                        },
                        "Cancel": function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

                $("#add_client").click(function() {
                    $("#newclient").dialog("open");
                });

                addLine();
                setPlusMinus();
            })

            function setPlusMinus() {
                // remove any existing + -
                $("div.plus").remove();
                $("div.minus").remove();

                // if only one line, just append a + to the right of that line
                // otherwise, append a + - to the right of each lines
                if ($("div.line").size() == 1) {
                    $("div.line div.add-remove").append("<div class=\"plus\">&nbsp;</div>");
                } else {
                    $("div.line div.add-remove").append("<div class=\"plus\">&nbsp;</div><div class=\"minus\">&nbsp;</div>");
                }

                $("div.plus").click(addLine);
                $("div.minus").click( function() {
                    $(this).parent().parent().remove();
                    setPlusMinus();
                    updateTotal();
                });
                $("div#lines-block div.line div").removeClass("pointed-line");
                $("div#lines-block div.line:last div").addClass("pointed-line");

                $("input").change(function() {
                    var quantity = $("[name=quantity]", $(this).parent().parent()).val();
                    var price = $("[name=price]", $(this).parent().parent()).val();
                    var vat = $("[name=vat]", $(this).parent().parent()).val();

                    if (quantity > 0 && price > 0 && vat > 0) {
                        var total = quantity * price * (1 + vat/100);
                        total = Math.round(total * 100) / 100;
                        $("div.total",$(this).parent().parent()).html("<p>" + total + "&nbsp;&euro;</p>");
                    }
                    updateTotal();
                });
            }

            function updateTotal() {
                var total = 0;
                $("div.line").each( function() {
                    var quantity = $("[name=quantity]", $(this)).val();
                    var price = $("[name=price]", $(this)).val();
                    var vat = $("[name=vat]", $(this)).val();

                    if (quantity > 0 && price > 0 && vat > 0) {
                        total += quantity * price * (1 + vat/100);
                    }
                })
                total = Math.round(total * 100) / 100;
                $("div.total-line div.total").html("<p>" + total + "&nbsp;&euro;</p>");
            }

            function addLine() {

                $("#lines-block form").append("" +
                        "<div class=\"line\">" +
                        "        <div class=\"description\">" +
                        "            <input type=\"text\" size=\"40\" name=\"description\"/>" +
                        "        </div>" +
                        "        <div class=\"quantity\">" +
                        "            <input type=\"text\" size=\"6\" name=\"quantity\"/>" +
                        "        </div>" +
                        "        <div class=\"price\">" +
                        "            <input type=\"text\" size=\"6\" name=\"price\"/> &euro;" +
                        "        </div>" +
                        "        <div class=\"vat\">" +
                        "            <input type=\"text\" size=\"6\" name=\"vat\"/> %" +
                        "        </div>" +
                        "        <div class=\"total\">" +
                        "            <p>&nbsp;&euro;</p>" +
                        "        </div>" +
                        "        <div class=\"add-remove\">" +
                        "            <div class=\"plus\">&nbsp;</div>" +
                        "            <div class=\"minus\">&nbsp;</div>" +
                        "        </div>" +
                        "    </div>");
                setPlusMinus();
            }

            function serializeData() {
                var invoice = new Object();
                invoice.issueDate = Date.parse($("#date p").html());
                if ($("#client-name").val() != "") {
                    var client = new Object();
                    client.name = $("#client-name").val();
                    client.street = $("#client div.data p.street").html();
                    client.zip = $("#client div.data p.zipcity span.zip").html();
                    client.city = $("#client div.data p.zipcity span.city").html();
                    client.country = $("#client div.data p.country").html();
                    client.vat = $("#client div.data p.vat").html();
                    client.id = $("#client_id").html();
                    invoice.client = client;
                } else {
                    var contract = new Object();
                    contract.reference = $("#contract-ref").val();
                    invoice.contract = contract;
                }

                var lines = new Array();

                $.each($("div.line"), function(index,value) {
                    var line = new Object();
                    line.description = $('div.description input', $(this)).val();
                    line.quantity = $('div.quantity input', $(this)).val();
                    line.unitPrice = $('div.price input', $(this)).val();
                    line.vat = $('div.vat input', $(this)).val() / 100;
                    lines.push(line);
                });

                invoice.lines = lines;

                return invoice;
            }

        </script>
        <title>Quattroclix - Invoicing</title>
    </head>
    <body>
        <div id="newclient" title="New Client">
            <form>
                <div class="newclient_label"><label for="name">Name</label></div>
                <div class="newclient_data">
                    <input type="text" name="name" id="name"/></div>
                <div class="newclient_label"><label for="street">Street</label></div>
                <div class="newclient_data"><input type="text" name="street" id="street" value=""/></div>
                <div class="newclient_label"><label for="zip">Zip</label></div>
                <div class="newclient_data"><input type="text" name="zip" id="zip" value=""/></div>
                <div class="newclient_label"><label for="city">City</label></div>
                <div class="newclient_data"><input type="text" name="city" id="city" value=""/></div>
                <div class="newclient_label"><label for="country">Country</label></div>
                <div class="newclient_data"><input type="text" name="country" id="country" value=""/></div>
                <div class="newclient_label"><label for="vat">VAT</label></div>
                <div class="newclient_data"><input type="text" name="vat" id="vat" value=""/></div>
            </form>
        </div>

        <div id="background">
            <div class="wraper">
                <div id="header">
                    <a href="index.html">
                        <img src="../../img/logo.gif" width="257" height="36" id="logo"
                            alt="logo Quattroclix" />
                    </a>
                    <div id="menu">
                        <ul>
                            <li class="first"><a href="../contract/new-contract.html">New Contract</a></li>
                            <li><a class="active" href="../invoice/new-invoice.html">New Invoice</a></li>
                            <li><a href="../invoice/view-invoice.html">View Invoice</a></li>
                            <li><a href="../timesheet/new-timesheet.html">New Timesheet</a></li>
                            <li><a href="../timesheet/view-timesheet.html">View Timesheet</a></li>
                        </ul>
                    </div>
                </div>
                <div id="invoice">
                    <div id="invoice-header">
                        <div id="invoice-data">
                            <div class="label-value">
                                <div class="label"><p>Facture</p></div>
                                <div id="invoice-number" class="value"><p>xxxxxxxxxx</p></div>
                            </div>
                            <div class="label-value">
                                <div class="label"><p>Date</p></div>
                                <div id="date" class="value"><p>&nbsp;</p></div>
                            </div>
                        </div>
                        <div id="client">
                            <div class="label"><p>Client:</p></div>
                            <input id="client-name" class="client-name"/><a id="add_client" href="new-invoice.html#"><img src="../../img/add.png" alt="PLUS"/></a>
                            <div class="client-data">
                                <p class="name">&nbsp;</p>
                                <p class="street">&nbsp;</p>
                                <p class="zipcity"><span class="zip">&nbsp;</span>&nbsp;<span class="city">&nbsp;</span></p>
                                <p class="country">&nbsp;</p>
                                <p class="vat">&nbsp;</p>
                                <div id="client_id">&nbsp;</div>
                            </div>
                        </div>
                        <div id="contract">
                            <div class="label"><p>Contract:</p></div>
                            <input id="contract-ref" class="contract-ref"/>
                            <div class="client-data">
                                <p class="name">&nbsp;</p>
                                <p class="street">&nbsp;</p>
                                <p class="zipcity"><span class="zip">&nbsp;</span>&nbsp;<span class="city">&nbsp;</span></p>
                                <p class="country">&nbsp;</p>
                                <p class="vat">&nbsp;</p>
                                <div id="contract_client_id">&nbsp;</div>
                            </div>
                        </div>
                    </div>
                    <div id="lines-block">
                        <div id="lines-header">
                            <div class="description pointed-line">
                                <p>Description</p>
                            </div>
                            <div class="quantity pointed-line">
                                <p>Quantity</p>
                            </div>
                            <div class="price pointed-line">
                                <p>Price</p>
                            </div>
                            <div class="vat pointed-line">
                                <p>VAT</p>
                            </div>
                            <div class="total pointed-line">
                                <p>Total</p>
                            </div>
                            <div class="add-remove pointed-line"><p>&nbsp;</p></div>
                        </div>
                        <form>

                        </form>
                        <div class="total-line">
                            <div class="description">
                                <p>&nbsp;</p>
                            </div>
                            <div class="quantity">
                                <p>&nbsp;</p>
                            </div>
                            <div class="price">
                                <p>&nbsp;</p>
                            </div>
                            <div class="vat">
                                <p>Total:</p>
                            </div>
                            <div class="total">
                                <p>&nbsp; &euro;</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="actions">
                    <ul>
                        <li><a class="text" id="submit" href="new-invoice.html#">Submit</a></li>
                        <li><a class="text" id="cancel"href="new-invoice.html#">Cancel</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>

</html>
